<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>32-案例-背景倒影-遮罩</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";background:#ccc;}
			/*时间*/
			#time{
				widtH:100%;
				height:40px;
				text-align:center;
				line-height:40px;
				font-size:20px;
				background:linear-gradient(45deg,#ffff00,#ff0000,#33ff00,#009900,#0033ff);
				animation:time 5s linear infinite forwards;
			}
			@keyframes time{
				0%{
					color:#000;
				}
				25%{
					color:#fff;
				}
				50%{
					color:#f66;
				}
				75%{
					color:#f00;
				}
				100%{
					color:#00f;
				}
			}
			/*遮罩*/
			.box{
				width:500px;
				height:300px;
				margin:50px auto;
				background:url("../images/07.jpg")center/cover;
				-webkit-mask:url("../images/08.png") 30px 30px/ 20px 20px no-repeat,
				url("../images/08.png") 100px 30px/ 20px 20px no-repeat;
				animation:box 2s linear infinite alternate;
			}
			@keyframes box{
				100%{
					-webkit-mask-position:65px 65px;
				}
			}
			/*时间轴*/
			.time-axis{
				position:absolute;
				top:50px;
				left:220px;
				width:5px;
				height:200px;
				background:linear-gradient(#ffffff,#660033,#0066ff,#993366,#006600);
				border-radius:5px;
				
			}
		
			.time-axis .time-axis-one1{
				position:absolute;
				top:0;
				left:-2px;
				width:10px;
				height:10px;
				background:red;
				border-radius:50%;
				animation:time-axis-one1 4s linear;
			}
			@keyframes time-axis-one1{
				50%{
					background:yellow;
				}
				100%{
					background:red;
				}
			}
			.time-axis .time-axis-one1 .box1{
				position:absolute;
				top:0;
				left:-205px;
				width:200px;
				height:50px;
				border:1px solid #3333ff;
				opacity:0;
				animation:box1 4s linear;
			}
			@keyframes box1{
				50%{
					opacity:1;
				}
				100%{
					opacity:0;
				}
			}
			.time-axis .time-axis-one1:hover .box1{
				transition:all 2s linear;
				opacity:1;
			}
			.time-axis .time-axis-one2{
				position:absolute;
				top:50px;
				left:-2px;
				width:10px;
				height:10px;
				background:red;
				border-radius:50%;
				animation:time-axis-one2 4s 4s linear;
			}
			@keyframes time-axis-one2{
				50%{
					background:yellow;
				}
				100%{
					background:red;
				}
			}
			.time-axis .time-axis-one2 .box2{
				position:absolute;
				top:0;
				left:15px;
				width:200px;
				height:50px;
				border:1px solid #3333ff;
				opacity:0;
				animation:box2 4s 4s linear;
			}
			@keyframes box2{
				50%{
					opacity:1;
				}
				100%{
					opacity:0;
				}
			}
			.time-axis .time-axis-one2:hover .box2{
				transition:all 2s linear;
				opacity:1;
			}
			.time-axis .time-axis-one3{
				position:absolute;
				top:100px;
				left:-2px;
				width:10px;
				height:10px;
				background:red;
				border-radius:50%;
				animation:time-axis-one3 4s 8s linear;
			}
				@keyframes time-axis-one3{
				50%{
					background:yellow;
				}
				100%{
					background:red;
				}
			}
			.time-axis .time-axis-one3 .box3{
				position:absolute;
				top:0;
				left:-205px;
				width:200px;
				height:50px;
				border:1px solid #3333ff;
				opacity:0;
				animation:box3 4s 8s linear;
			}
			@keyframes box3{
				50%{
					opacity:1;
				}
				100%{
					opacity:0;
				}
			}
			.time-axis .time-axis-one3:hover .box3{
				transition:all 2s linear;
				opacity:1;
			}
			.time-axis .time-axis-one4{
				position:absolute;
				top:150px;
				left:-2px;
				width:10px;
				height:10px;
				background:red;
				border-radius:50%;
				animation:time-axis-one4 4s 12s linear;
			}
			@keyframes time-axis-one4{
				50%{
					background:yellow;
				}
				100%{
					background:red;
				}
			}
			.time-axis .time-axis-one4 .box4{
				position:absolute;
				top:0;
				left:15px;
				width:200px;
				height:50px;
				border:1px solid #3333ff;
				opacity:0;
				animation:box4 4s 12s linear;
			}
			@keyframes box4{
				50%{
					opacity:1;
				}
				100%{
					opacity:0;
				}
			}
			.time-axis .time-axis-one4:hover .box4{
				transition:all 2s linear;
				opacity:1;
			}
			.time-axis .time-axis-one5{
				position:absolute;
				top:200px;
				left:-2px;
				width:10px;
				height:10px;
				background:red;
				border-radius:50%;
				animation:time-axis-one5 4s 16s linear;
			}
			@keyframes time-axis-one5{
				50%{
					background:yellow;
				}
				100%{
					background:red;
				}
			}
			.time-axis .time-axis-one5 .box5{
				position:absolute;
				top:0;
				left:-205px;
				width:200px;
				height:50px;
				border:1px solid #3333ff;
				opacity:0;
				animation:box5 4s 16s linear;
			}
			@keyframes box5{
				50%{
					opacity:1;
				}
				100%{
					opacity:0;
				}
			}
			.time-axis .time-axis-one5:hover .box5{
				transition:all 2s linear;
				opacity:1;
			}
			/*圆*/
			.circular{
				position:absolute;
				top:60px;
				right:30px;
				width:400px;
			}
			.circular .circular-ball{
				position:absolute;
				top:80px;
				left:50px;
				width:50px;
				height:50px;
				background:yellow;
				border-radius:50%;
				transform-origin:150px 120px;
				animation:circular-ball 5s linear infinite forwards;
			}
			@keyframes circular-ball{
				16%{
					background:yellow;
					transform:rotate(60deg);
				}
				32%{
					background:#00ff00;
					transform:rotate(120deg);
				}
				48%{
					background:#ff3333;
					transform:rotate(180deg);
				}
				64%{
					background:#333300;
					transform:rotate(240deg);
				}
				80%{
					background:#ccff33;
					transform:rotate(300deg);
				}
				100%{
					background:#3366ff;
					transform:rotate(360deg);
				}
			}
			.circular ul{
				position:absolute;
				top:100px;
				left:120px;
				width:150px;
				height:200px;
				text-align:center;
			}
			.circular ul li{
				margin:7px;
				font-size:18px;
				opacity:0;
			}
			.circular ul li:nth-child(1){
				color:yellow;
				animation:li1 1s linear forwards;
			}
			@keyframes li1{
				100%{
					opacity:1;
				}
			}
			.circular ul li:nth-child(2){
				color:#000;
				animation:li2 1s 1s linear forwards;
			}
			@keyframes li2{
				100%{
					opacity:1;
				}
			}
			.circular ul li:nth-child(3){
				color:#3300ff;
				animation:li3 1s 2s linear forwards;
			}
			@keyframes li3{
				100%{
					opacity:1;
				}
			}
			.circular ul li:nth-child(4){
				color:#00ff00;
				animation:li4 1s 3s linear forwards;
			}
			@keyframes li4{
				100%{
					opacity:1;
				}
			}
			.circular ul li:nth-child(5){
				color:#cc3300;
				animation:li5 1s 4s linear forwards;
			}
			@keyframes li5{
				100%{
					opacity:1;
				}
			}
			.circular ul li:nth-child(6){
				color:#660000;
				animation:li6 1s 5s linear forwards;
			}
			@keyframes li6{
				100%{
					opacity:1;
				}
			}
		</style>
	</head>
	<body>
		<!--时间-->
		<div id="time"></div>
		<!--遮罩-->
		<div class="box"></div>
		<!--时间轴-->
		<div class="time-axis">
			<div class="time-axis-one1">
				<div class="box1">2018-2-24:梦开始的地方</div>
			</div>
			<div class="time-axis-one2">
				<div class="box2">满怀期待着</div>
			</div>
			<div class="time-axis-one3">
				<div class="box3">艰苦奋斗中</div>
			</div>	
			<div class="time-axis-one4">
				<div class="box4">......</div>
			</div>	
			<div class="time-axis-one5">
				<div class="box5">梦想破灭</div>
			</div>
		</div>
		<!--圆-->
		<div class="circular">
			<div class="circular-ball"></div>
			<ul>
				<li>春晓</li>
				<li>孟浩然</li>
				<li>春眠不觉晓</li>
				<li>处处闻啼鸟</li>
				<li>夜来风雨声</li>
				<li>花落知多少</li>
			</ul>
		</div>
		<script>
				setInterval(function(){
					var myDate = new Date();
					var x=myDate.getFullYear()+"年"+(myDate.getMonth()+1)+"月"+myDate.getDate()+"日 "+myDate.getHours()+"点"+myDate.getMinutes()+"分"+myDate.getSeconds()+"秒";
					document.getElementById("time"). innerHTML=x;
				},1000); 
		</script>	
	</body>
</html>
